<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--移动webapp需要定义viewport.-->
    <meta name="viewport" content="width=device-width initial-sacle=1.0 maximum-scale= 1.0 minimum-sacle=1.0 user-saclable=no">
    <title>登录页面</title>
    <style>
        html,body{
            height: 100%;
            margin: 0;
        }
        main{
            width: 100%;
            height: 100%;
            margin: 0 auto;
            border: 1px solid silver;
            overflow: hidden;

        }

        main>img{
            /*position: absolute;*/
            width: 100%;
            height: 100%;
            /*filter: 设置滤镜效果.blur()是生成一个模糊效果.*/
            filter: blur(1px);
            -webkit-filter: blur(1px);
        }
        
        main>header{
            width: 100%; 
            height: 100px;           
            position: absolute;
            /*background-color: orange;*/
            top: 0;
            left: 0;
        }
        header>div{
            width: 20vw;
            height: 20vw;
            border-radius: 50%;
            background-image: url(img/b.jpg);
            background-position: 20% 50%;
            background-color: red;
            margin: 3rem auto ;
            border: 0.2rem solid white;
        }

        main>section{
            position: absolute;
            left: 0;
            top: 10rem;
            text-align: center;
        }

        section>form{
            width: 100%;
            padding: 3rem;
        }
    </style>
</head>
<body>
    <main>
        <!--背景-->
        <img src="img/a.jpg" alt="一张美丽的背景图">

        <!--显示头像-->
        <header>
            <div>
                
            </div>
        </header>
        <section>
            <form>
                <label for="name">用户名:</label>
                <input type="text" name="name" value="" placeholder="请输入用户名">
                <label for="psw">密&#x3000;码:</label>
                <input type="password" name="psw" value="" placeholder="请输入密码">
            </form>
        </section>
    </main>
</body>
</html>